<template>
  <CommonPage :show-header="false">
    <article class="margin-top-sm flex  flex-column flex-sub">
      <section style="display: flex;justify-content: space-between;margin-bottom: 10px">
        <div style="display: flex">
          <StatusSelect v-model:value="andParams.status" @on-select="search"></StatusSelect>
          <SortSelect1 v-model:value="sortKey" @on-select="search"></SortSelect1>
        </div>
        <div>
          <SearchInput v-model:value="searchKey" @change="search" placeholder="ID/用户名" :loading="loading"></SearchInput>
        </div>
      </section>
      <section  style="overflow:hidden" class="flex flex-sub radius-lg bg-white  padding-tb-sm">
          <CurdTable ref="tableRef"
                     :get-data="api.user.list"
                     :columns="columns" :and-params="andParams" :or-params="orParams" :order-params="orderParams">
          </CurdTable>

      </section>
    </article>
  </CommonPage>
</template>

<script setup lang="ts">

import CommonPage from "@/components/page/CommonPage.vue";
import CurdTable from "@/components/common/table/CurdTable.vue";
import {h, onMounted, ref} from "vue";
import {NAvatar, NButton, NEllipsis, NText} from "naive-ui";
import api from '@/api'
import SearchInput from "@/components/common/input/SearchInput.vue";
import StatusSelect from "@/components/example/select/StatusSelect.vue";
import SortSelect1 from "@/components/example/select/SortSelect1.vue";
import myMoment from "@/utils/common/myMoment";
import StatusTag from "@/components/common/tag/StatusTag.vue";
import {imagePathPrefix} from '~/settings'

const prefix =imagePathPrefix
const loading = ref(false)
const tableRef = ref()
const columns = [
  {title: 'ID', key: 'id', width: 2, ellipsis: {tooltip: true}},
  {
    title: '头像', key: 'avatar', width: 5, ellipsis: {tooltip: true},
    render(row: any) {
      return h(NAvatar, {
        width: 100,
        src: prefix+row.avatar || "https://www.zzjtpp.top/blogAPI/uploadFile/%E5%A4%B4%E5%83%8F.bmp",
        round: true
      })
    }
  },
  {
    title: '用户名', key: 'username', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '16px'}}, {default: () => row.username})
    }
  },
  {
    title: '登录时间', key: 'loginTime', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: { [x: string]: any; }) {
      return h("div", {}, [
        h("div", {style: {fontSize: '14px'}}, [h(NEllipsis, {}, {default: () => myMoment(row?.loginTime).format("MMMDo HH:mm")})]),
        h(NText, {depth: '3'}, {default: () => myMoment(row?.loginTime).startOf('minute').fromNow()}),
      ])
    }
  },
  {
    title: '登录IP', key: 'loginIp', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '16px'}}, {default: () => row.loginIp||'-'})
    }
  },
  {
    title: '登录属地', key: 'loginAddress', width: 5, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(NText, {style: {fontSize: '16px'}}, {default: () => row.loginAddress||'-'})
    }
  },
  {
    title: '身份状态', key: 'status', width: 6, ellipsis: {tooltip: true}, align: 'center',
    render(row: any) {
      return h(StatusTag, {style: {fontSize: '20px'}, status: row.status}, {})
    }
  },
  {
    title: '操作', key: 'actions', width: 10, align: 'center',
    render(row: any) {
      return [
        h(NButton, {
          round: true,
          secondary: true,
          type: "error",
          onClick: () => handleDel(row)
        }, {default: () => "删除"}),
      ]
    }
  }
]
const searchKey = ref('')
const sortKey = ref('2')
/** QueryBar筛选参数（可选） */
const orParams = ref({
  username: '',
  id: '',
})
/** 补充参数（可选） */
const andParams = ref({
  status: '',
})
/** 排序参数(可选）*/
const orderParams = ref({
  loginTime: '',
})

onMounted(() => {
  search()
})

const handleDel = (row: any) => {
  window.$dialog.info({
    title: '确定要删除该用户？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      api.user.delByUsername({
        username:row.username,
      }).then(res=>{
        if(res&&res.data.code===0){
          window.$message.success(res.data.msg)
          search()
        }
      })
    }
  })

}

const search = async () => {
  loading.value = true
  Object.keys(orParams.value).forEach((key: any) => {
    //@ts-ignore
    orParams.value[key] = `%${searchKey.value}%`
  })
  if (sortKey.value === '1') {
    orderParams.value.loginTime = '1'
  } else if (sortKey.value === '2') {
    orderParams.value.loginTime = '2'
  } else {
    orderParams.value.loginTime = ''
  }
  await tableRef.value.handleSearch()
  loading.value = false
}
</script>

<style scoped>

</style>